<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>作品展示</title>

  <link rel="stylesheet" href="./lib/element-ui/index.css" />
  <link rel="stylesheet" href="./lib/time/time.css" />

  <script src="./lib/vue.min.js"></script>
  <script src="./lib/element-ui/index.js"></script>
  <script src="./lib/axios.min.js"></script>
  <script src="./lib/time/jquery.js"></script>
  <script src="./lib/time/time.js"></script>
  <script src="./lib/echarts.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: url(./lib/images/vote_back.png) no-repeat center center fixed;
      background-size: contain;
      color: black;
    }

    #main {
      position: relative;
      width: 80vw;
      height: 95vh;
      margin: 0 auto;
    }

    .header {
      position: absolute;
      top: 2vw;
    }

    .header>h1 {
      font-size: 3vw;
    }

    .header>p {
      font-size: 2vw;
    }

    .header>img {
      margin-top: 1.5vw;
      width: 18vw;
    }

    .container {
      position: absolute;
      width: 100%;
      height: 50vh;
      bottom: 0;
    }

    .container>div {
      float: left;
      width: 22vw;
      height: 50vh;
      border-radius: 2.5vw;
      background-color: #a2d2ff;
      box-shadow: 0 0 12px #999;
      transition: all 0.3s;
    }

    .container #bar {
      position: absolute;
      width: 22vw;
      height: 55vh;
    }

    .container .game_time {
      position: absolute;
      top: 2vw;
      margin: 0 3vw;
    }

    .container .game_button {
      position: absolute;
      width: 30vw;
      bottom: 2vw;
    }

    .container .game_button button {
      width: 8vw;
      height: 5vh;
      font-size: 1.2vw;
      border-radius: 3vw;
      border: none;
      margin: 0 1.3vw;
    }

    .container .game_button button:nth-child(2) {
      background-color: #e87474;
      color: #fff;
    }

    .container .game_button button:nth-child(3) {
      background-color: #fff;
    }

    .container>div:nth-child(2) {
      margin: 0 7vw 0 7vw;
    }

    .container>div:nth-child(2) {
      background-color: #a2b6ff;
    }

    .container>div:nth-child(3) {
      background-color: #fea1a2;
    }

    .container .right .QRcode {
      position: relative;
      width: 15vw;
      height: 15vh;
      margin: 3.5vw auto;
    }

    .container .right .QRcode img {
      width: 15vw;
      height: 15vw;
    }

    .container .right h1 {
      position: absolute;
      font-size: 1.8vw;
      color: white;
      margin-left: 3.25vw;
      bottom: 1vw;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="header">
      <h1>作品名称：{{ artwork.name }}</h1>
      <p>作者：{{ artwork.author }}</p>
      <img src="./lib/images/like.png" alt="" />
    </div>
    <div class="container">
      <div class="left">
        <div id="bar"></div>
      </div>
      <div class="center">
        <div class="game_time">
          <div class="hold">
            <div class="pie pie1"></div>
          </div>

          <div class="hold">
            <div class="pie pie2"></div>
          </div>

          <div class="bg"></div>

          <div class="time"></div>
        </div>
        <div class="game_button">
          <audio src="./lib/video/listen.mp3" id="myaudio" controls="controls" hidden="true">
          </audio>
          <button @click="begin()">开始投票</button>
          <button @click="next()">下一个</button>
        </div>
      </div>
      <div class="right">
        <div class="QRcode">
          <img src="./lib/images/vote_result.png" />
        </div>
        <h1>扫描二维码进行投票</h1>
      </div>
    </div>
  </div>

  <script>
    const main = new Vue({
      el: "#main",
      data() {
        return {
          workName: "",
          author: "",
          dataBar: [],
          dataName: [],
          artwork: {},

          // echarts参数
          dom: null,
          myChart: {},
          option: {},
          app: {},
        };
      },
      methods: {
        // 开始投票
        begin() {
          axios.post("/vote/start").then((res) => {
            console.log(res.data);
          });
          this.run();
          this.control();
          countDown(true);
        },

        control() {
          var myAuto = document.getElementById("myaudio");
          myAuto.play();
        },

        once() {
          $("button").click(function () {
            $(this).attr("disabled", true);
            $(this).attr("style", "background-color:#A9A9A9; color:black");
          });
        },

        // 下一个作品
        next() {
          // 页面加载赋值
          axios.post("/vote/next").then((res) => {
            console.log(res.data);
            if (res.data.message === "所有作品均已投票完毕!") {
              window.location.href = "result.html";
            } else {
              window.location.reload();
            }
          });
        },
        run() {
          let gameOver = setInterval(() => {
            if (controlFlag) {
              for (let i = 0; i < 60; ++i) {
                if (Math.random() > 0.9) {
                  this.option.series[0].data[0] += Math.round(
                    Math.random() * 2
                  );
                }
              }
            } else {
              clearInterval(gameOver);
              this.option.series[0].itemStyle.normal.color =
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4254aa",
                  },
                  {
                    offset: 1,
                    color: "#4254aa",
                  },
                ]);
            }
            this.myChart.setOption(this.option);
          }, 1000);
        },
      },
      created() {
        axios.get("/vote/getArtwork").then((res) => {
          console.log(res.data);
          if (res.data.data === null) {
            window.location.href = "result.html";
          }
          this.artwork = res.data.data;
          this.dataName.push(this.artwork.name);
          this.dataName.push(this.artwork.name);
        });
        countDown(false);
      },

      mounted() {
        // 设置按钮只能点击一次
        this.once();
        this.dom = document.getElementById("bar");
        this.myChart = echarts.init(this.dom);
        this.app = {};
        this.option;

        const data = this.dataBar;

        this.option = {
          yAxis: {
            type: "value",
            min: 0,
            max: 450,
            // show: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#6e7079",
              },
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#6e7079",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#6e7079",
              },
            },
            // axisLabel: false,
            axisLabel: {
              // fontSize: 15,
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("");
                } else if (value <= 1) {
                  texts.push("好");
                } else if (value <= 2) {
                  texts.push("很好");
                } else if (value <= 3) {
                  texts.push("非常好");
                } else {
                  texts.push("");
                }
                return texts;
              },
            },
          },
          xAxis: {
            type: "category",
            data: [" "],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 0,
            axisLabel: {
              fontSize: 15,
            },
          },
          series: [
            {
              realtimeSort: true,
              type: "bar",
              data: [0],
              label: {
                show: false,
                position: "top",
                valueAnimation: true,
              },
              itemStyle: {
                barBorderRadius: [5, 2, 0, 0],
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#5a6dbc",
                    },
                    {
                      offset: 1,
                      color: "#4254aa",
                    },
                  ]),
                },
              },
            },
          ],
          legend: {
            show: true,
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: "linear",
          animationEasingUpdate: "linear",
        };

        this.myChart.setOption(this.option);
      },
    });
  </script>
</body>

</html>